/*
 * @Author: codeD
 * @Date: 2022-02-18 20:42:54
 * @LastEditors: codeD
 * @LastEditTime: 2022-02-19 15:41:01
 * @Description: file content
 * @FilePath: \wpt\src\pages\Classification\ClassDetail\complete\index.tsx
 */


import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { GoodsRank,GoodsRanks } from './type';
import styles from './index.module.css'
import { render } from '@testing-library/react';
const MOCK = [
    {
        icon: 'https://img2.baidu.com/it/u=1004091019,1791037190&fm=253&fmt=auto&app=138&f=JPEG?w=480&h=800',
        name: '铁牛',
        price: '30',
        status: '成交'
    },
    {
        icon: 'https://img0.baidu.com/it/u=1776851314,3094387497&fm=253&fmt=auto&app=120&f=JPEG?w=412&h=1000',
        name: '孙悟空',
        price: '20',
        status: '淘汰'
    },
    {
        icon: 'https://img1.baidu.com/it/u=1249727584,242395142&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=876',
        name: '超级赛亚人3',
        price: '23',
        status: '淘汰'
    },
    {
        icon: 'https://img2.baidu.com/it/u=1966419656,3725877529&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=500',
        name: '超级赛亚人',
        price: '20',
        status: '淘汰'
    },
    {
        icon: 'https://img0.baidu.com/it/u=1554075135,1621076568&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721',
        name: '比克大魔王',
        price: '18',
        status: '淘汰'
    },
    {
        icon: 'https://img0.baidu.com/it/u=1776851314,3094387497&fm=253&fmt=auto&app=120&f=JPEG?w=412&h=1000',
        name: '孙悟空',
        price: '20',
        status: '淘汰'
    },
    {
        icon: 'https://img1.baidu.com/it/u=1249727584,242395142&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=876',
        name: '超级赛亚人3',
        price: '23',
        status: '淘汰'
    },
    {
        icon: 'https://img2.baidu.com/it/u=1966419656,3725877529&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=500',
        name: '超级赛亚人',
        price: '20',
        status: '淘汰'
    },
]
const complete = () => {
    const params = useParams();
    
        const [goodsRank,setGoodsRank]=useState< typeof MOCK>([] as GoodsRank);
        const [goodRank,setGoodRank]=useState< typeof MOCK>([] as GoodsRank);
    const mock = () => {
        return new Promise((resolve, reject) => {
            resolve(MOCK)
        })
    }
    const getGoodsDetailList = async (index:number) => {
        const data=await fetch(`https://api.weipaitang.com/wechat/v1.0/category/get-sale-list?__uuri=&_h=wDs%3DkDMUVlTKR1UxVTVNpkUsR1drZkVOh2VSRFbFFmROZ1UZMz&_a=&start=&page=&sort=0&cateId=${params.cateId}&secCateId=${params.secCateId}&conditions=&tagId=&isShareData=1&isNewUI=1&minPrice=&maxPrice=&minIncrease=&maxIncrease=&minShopLevel=&maxShopLevel=`).then(res=>res.json())
       console.log(data);
        mock().then((res:any)=>{       
           const arr=res.slice(index,index+3)
           setGoodsRank(res)
           const arr1=[...goodRank,...arr]
           setGoodRank(arr1); 
        })
       
    }
    const moreListGoodsRank=()=>{
        
        getGoodsDetailList(goodRank.length)
    }
    useEffect(()=>{
        renderRank()
      
    },[goodRank])
    useEffect(() => {
        getGoodsDetailList(goodRank.length)
        
    }, [])
    const renderRank=()=>{
     return   goodRank.map((item:GoodsRanks,index:number)=>{
            return ( <div className={styles['goods-wrap']} key={index}>
                  <img src={item.icon} alt="" className={styles['goods-icon']}/>
                  <div className={styles['name-price']}>
                      <div className={styles['name']}>{item.name}</div>
                      <div className={styles['price']}>{item.price}</div>
                  </div>
                  <div className={styles['status']}>{item.status}</div>
              </div>)
          })
    }
    return (
        <div className={styles['rank-wrap']}>
            {renderRank()}
            <div className={`${styles.active} ${goodRank.length===goodsRank.length &&styles.noactive}` }  onClick={moreListGoodsRank}> 加载更多</div>
        </div>
    )
}
export default complete